<template>
    <div class="condition_list_wp">
        <div class="tab_title">
            <span>云条件单</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-conditionList')"></i>
        </div>
        <div class="c_body">
            <div class="list_item">
                <span class="title">合约：</span>
                <select class="select_name select_name2" v-model="shangpinInfo.heyue_id">
                    <option :value="item.heyue_id" v-for="item in classHeyue" :key="item.hb_id">
                        {{ item.heyue_name }}
                    </option>
                </select>
                <span class="name" v-if="shangpinInfo.heyue_id">{{ classHeyue.find(item => item.heyue_id ==
                    shangpinInfo.heyue_id)?.heyue_name }}</span>
            </div>
            <div class="list_item">
                <span class="title">条件：</span>
                <label class="label_jiage">
                    <input type="radio" checked>
                    价格条件单
                </label>
                <span class="name">条件单价格</span>
                <input class="price_num" type="number" v-model="shangpinInfo.xiadanPrice">
                <span class="name">0为市价</span>
            </div>
            <div class="list_item">
                <span class="title">订单：</span>
                <select class="select_name select_name1" v-model="shangpinInfo.buySell">
                    <option value="1">买入</option>
                    <option value="2">卖出</option>
                </select>
                <select class="select_name select_name1" v-model="shangpinInfo.kaiPing">
                    <option value="1">开仓</option>
                    <option value="2">平仓</option>
                </select>
                <span class="name">触发价</span>
                <input class="price_num" type="number" v-model="shangpinInfo.reservNum">
                <span>手</span>
            </div>
        </div>
        <div class="segmentation_line"></div>
        <div class="illustrate">
            <div>说明：</div>
            <div class="msg_item">1.条件单不保证成交在触发价，会有一个或更大的交易滑点。</div>
            <div class="msg_item">2.条件单在云端运行，软件关闭后依然有效，云端自动确认结算单。</div>
        </div>
        <div class="btns">
            <span @click="onsumbit">提交</span>
            <span @click="ipcRenderer.send('close-conditionList')">取消</span>
        </div>
        <diao_msg ref="diaoMsg" />
    </div>
</template>

<script setup>
const { ref, reactive } = require('vue')
const { ipcRenderer } = require('electron');
import { throttle } from 'lodash';
import diao_msg from '@/components/view_list/diao_msg.vue'

const diaoMsg = ref(null)
const classHeyue = ref([])
const shangpinInfo = reactive({
    heyue_id: '',
    reservNum: 1,
    xiadanPrice: 0,
    buySell: 1,
    kaiPing: 1,
})
ipcRenderer.on('show-conditionList', (e, v) => {
    classHeyue.value = JSON.parse(v.classHeyue)
    shangpinInfo.heyue_id = v.heyue_id ? v.heyue_id : classHeyue.value[0].heyue_id
})

const onsumbit = throttle(() => {
    if (!shangpinInfo.heyue_id) {
        diaoMsg.value.open('请选择合约')
        return
    }
    let obj = classHeyue.value.find(item => item.heyue_id ==
        shangpinInfo.heyue_id)
    obj = { ...obj, ...shangpinInfo }
    ipcRenderer.send('placeAnOrderWindow_click_msg', { type: '添加条件单', shangpinInfo: JSON.stringify(obj) })
    ipcRenderer.send('close-conditionList')
}, 1500);
</script>

<style scoped lang="less">
.condition_list_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 235px;
    width: 500px;

    .tab_title {
        background-color: #ebf6f9;
        color: #919191;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .c_body {
        padding: 0 15px 5px;

        .list_item {
            display: flex;
            align-items: center;
            padding-top: 10px;

            .title,
            .select_name,
            .label_jiage,
            .name,
            .price_num {
                margin-right: 10px;
                font-size: 12px;
                height: 22px;
                line-height: 22px;
            }

            .label_jiage {
                display: flex;
                align-items: center;
            }

            .price_num,
            .select_name1 {
                font-size: 11px;
                width: 100px;
            }

            .select_name2 {
                width: 130px;
            }
        }
    }

    .segmentation_line {
        background-color: #8eabc8;
        height: 4px;
        margin: 0 15px;
    }

    .illustrate {
        padding: 5px 15px;

        .msg_item {
            line-height: 25px;
        }
    }

    .btns {
        text-align: right;

        span {
            border: 1px solid #033668;
            display: inline-block;
            border-radius: 3px;
            background: #fdfdfd;
            line-height: 20px;
            width: 80px;
            text-align: center;
            margin-right: 15px;
        }
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    /* 始终显示箭头 */
}

/* 针对 Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    /* 让箭头始终显示 */
}
</style>
